<template>
  <div class="header">
    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="collapseChage">
      <el-icon v-if="sidebar.collapse">
        <Expand />
      </el-icon>
      <el-icon v-else>
        <Fold />
      </el-icon>
    </div>
    <div class="logo">xxxx管理系统</div>
    <div class="header-right">
      <div class="header-user-con">
        <!-- 全屏显示 -->
        <!-- <div class="btn-fullscreen"
             @click="handleFullScreen">
          <el-tooltip effect="dark"
                      :content="fullscreen ? `取消全屏` : `全屏`"
                      placement="bottom">
            <i class="el-icon-rank"></i>
          </el-tooltip>
        </div> -->
        <!-- 用户头像 -->
        <div class="user-avator">
          <router-link v-if="tagsList.length > 0" :to="tagsList[0].path">
            <img :src="userInfo.avatar !== '' ? IMG_URL + userInfo.avatar : avatarImg" />
            <!-- <img :src="avatarImg" /> -->
          </router-link>
        </div>
        <!-- 用户名下拉菜单 -->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ userInfo.nick_name }} <i class="el-icon-caret-bottom"></i>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <div v-for="(item, index) in tagsList" :key="index">
                <!-- 路由跳转链接 -->
                <router-link :to="item.path">
                  <el-dropdown-item>
                    {{ item.title }}
                  </el-dropdown-item>
                </router-link>
              </div>
              <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useMenuStore } from "@/store/menu";
import { useSidebarStore } from "@/store/sidebar";
import { useUserStore } from "@/store/user";
import avatarImg from "@/assets/img/avatar.jpg";
import { IMG_URL } from "@/utils/config";
import type { IMyInfo } from "@/types/master";
import type { ITagItem } from "@/types/tags";
import type { IMenu } from "@/types/menu";

const menuStore = useMenuStore();
const tagsList: Array<ITagItem> = [
  {
    name: "personalInfo",
    path: "/personalInfo",
    title: "个人信息",
    fullPath: "/personalInfo"
  },
  {
    name: "changePassword",
    path: "/changePassword",
    title: "修改密码",
    fullPath: "/personalInfo"
  }
];
const sidebar = useSidebarStore();
// 侧边栏折叠
const collapseChage = () => {
  sidebar.handleCollapse();
};

onMounted(() => {
  if (document.body.clientWidth < 1500) {
    collapseChage();
  }
});

// 用户名下拉菜单选择事件
const router = useRouter();
function handleCommand(command: "loginout" | "user") {
  console.log(command);
  if (command == "loginout") {
    localStorage.removeItem("Authorization");
    localStorage.removeItem("refreshToken");
    router.push("/login");
    menuStore.setMenuListInfo([] as Array<IMenu>);
    menuStore.setPermissionInfo({});
  } else if (command == "user") {
    router.push("/user");
  }
}

/* 用户信息 */
const userStore = useUserStore();
const userInfo = userStore.userInfo;
/* 获取用户信息 */
function handleGetUserInfoInfo() {
  userStore
    .getUserInfoInfo<IMyInfo>()
    .then(res => {
      let userInfo: IMyInfo = {} as IMyInfo;
      userInfo.agency_name = res.result.agency_name;
      userInfo.role_name = res.result.role_name;
      userInfo.user_name = res.result.user_name;
      userInfo.nick_name = res.result.nick_name;
      userInfo.mobile = res.result.mobile;
      userInfo.avatar = res.result.avatar;
      userStore.setUserInfo(userInfo);
    })
    .catch(() => {
      console.log("失败");
    });
}
/* 获取用户信息 */
handleGetUserInfoInfo();
</script>

<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  /* background-color: #1e3c6e; */
  font-size: 22px;
  color: #fff;
}

.collapse-btn {
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 70px;
}

.header .logo {
  float: left;
  /* width: 250px; */
  line-height: 70px;
}

.header-right {
  float: right;
  padding-right: 50px;
}

.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}

.aky {
  float: left;
  height: 100%;
  margin-right: 21px;
  padding: 10px;
  line-height: 70px;
  box-sizing: border-box;
}

.aky-img {
  height: 100%;
}

/* .btn-help {
  margin-right: 5px;
  font-size: 24px;
   cursor: pointer;
} */
.btn-fullscreen {
  transform: rotate(45deg);
  margin: 0 5px;
  font-size: 24px;
}

.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}

.btn-bell-badge {
  position: absolute;
  right: 0;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}

.btn-bell .el-icon-bell {
  color: #fff;
}

.user-name {
  margin-left: 10px;
}

.user-avator {
  margin-left: 20px;
}

.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
}

.el-dropdown-menu__item {
  text-align: center;
}

.el-dropdown-menu__item a {
  color: #606266;
}

.to-console,
.btn-help {
  margin-right: 15px;
  font-size: 22px;
  cursor: pointer;
}

.to-console:hover,
.btn-help:hover {
  color: #606266;
  transition: 0.3s;
}
</style>
